<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            font-size: 20px;
        }

        img {
            display: block;
        }
        .download{
            margin-left: 20px;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #ccc;
            border: 1px solid #333;
            padding: 4px 20px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            border-radius: 20px;
            color: #333;
            font-size: 13px;
            margin-top: 20px;

        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .appDetails{
            display: inline;
        }

        .upload{
            margin-top: 10px;
        }

        .appDescribe{
            color: green;
        }

        #msg{
            font-size: 12px;
        }

        .ios{
           border:2px solid darkseagreen;
           margin: 10px 10px 0 ;
            padding: 10px;
            width: 40%;
            float: left;
        }

        .android{
            border:2px solid darkseagreen;
            margin: 10px 10px 0  0;
            padding: 10px;
            width: 45%;
            float: right;
        }

        .appInfo{
            border:2px solid darkseagreen;
            margin: 10px 10px 0 ;
            width: 35%;
            padding: 10px;
        }

        .appImage{
            width: 50px;
            height: auto;
        }

    </style>
</head>
<body>

<div>
    <h5>财富APP下载(二维码演示)</h5>
    <div>
        <img src="static/image/QRCode.png" alt="">
        <a href="https://10.49.33.241:8443/ca/myCA.cer">iOS证书下载(根证书（局域网需要,用来支持https）)</a>
        <a href="itms-services://?action=download-manifest&url=https://10.49.33.241:8443/filedownload/CedarFinancialPlanner.plist">iOS安装</a>
        <a class="download" href="http://localhost:8080/app/app-cedarTest-debug.apk">Android安装</a>
    </div>
</div>



<div>

    <div class="appInfo">
        <a href="javascript:;" class="file gradient">选择应用
            　 <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected()">
        </a>

        <!--文件详情-->
        <div id="fileFrame" ></div>
            <div >
                <p class="appDetails">应用名称:  </p>
                <p class="appDetails appDescribe" id="fileName"> </p>
            </div>

            <div>
                <p class="appDetails">应用大小:  </p>
                <p class="appDetails appDescribe" id="fileSize"></p>
            </div>
        <div>
            <button class="upload" onclick="newFileUpload()">上传</button>
        </div>
    </div>


    <div id="msg" style="max-height: 400px; overflow:auto;min-height: 50px;color: red;float: outside">

    </div>


    <!--应用上传后后台进行解析-->
    <div class="ios">
        <div style="align-content: center;text-align: center ;color: orange; ">iOS应用</div>
        <div>
            <img  class="appImage"  id="iOSIcon">
        </div>
        <div >
            <p class="appDetails">应用名:  </p>
            <p class="appDetails appDescribe" id="appName"> </p>

        </div>

        <div >
            <p class="appDetails">版本号:  </p>
            <p class="appDetails appDescribe" id="version"> </p>
        </div>

        <div >
            <p class="appDetails">bundleID:  </p>
            <p class="appDetails appDescribe" id="bundleID"> </p>
        </div>

        <div >
            <p class="appDetails">团队team:  </p>
            <p class="appDetails appDescribe" id="team"> </p>
        </div>

        <div>
            <p class="appDetails">下载地址:  </p>
            <a class="appDetails appDescribe" id="iOSDownload"> </a>
        </div>
    </div>

    <div class="android">
        <div style="align-content: center;text-align: center ;color: orange; ">android应用</div>
        <div>
            <img  class="appImage"  id="androidIcon">
        </div>
        <div >
            <p class="appDetails">应用名:  </p>
            <p class="appDetails appDescribe" id="androidAppName"> </p>
        </div>

        <div >
            <p class="appDetails">版本号:  </p>
            <p class="appDetails appDescribe" id="androidVersion"> </p>
        </div>

        <div >
            <p class="appDetails">bundleID:  </p>
            <p class="appDetails appDescribe" id="androidBundleID"> </p>
        </div>
        <div >
            <p class="appDetails">其它:  </p>
            <p class="appDetails appDescribe" id="androidTeam"> </p>
        </div>
        <div>
            <p class="appDetails">下载地址:  </p>
            <a class="appDetails appDescribe" id="androidDownload">
            </a>
        </div>
    </div>

    <!--<button onclick="testData()">测试ajax数据</button>-->

</div>


<script src="static/js/jquery-3.3.1.js"></script>


<script>

    var  fileUrl ;

    $(document).ready(function() {

//        $("a[id='androidDownload']").click(function(){
//            window.location.href = fileUrl;
//        });
    });

    function newFileUpload(){

        var fileObj = document.getElementById("fileToUpload").files[0]; // js 获取文件对象
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
            alert("请选择应用");
            return;
        }

        var formFile = new FormData();
        formFile.append("file", fileObj); //加入文件对象
        formFile.append("fileName",encodeURIComponent(fileObj.name));
        formFile.append("fileSize",fileObj.size);

        var xhr = new XMLHttpRequest();
        xhr.open("post", "/appupload?fileName="+ encodeURIComponent(fileObj.name)+"&fileSize="+fileObj.size, true);
        xhr.onload = function () {
           // $("#msg").html("上传完成!");
        };

        xhr.onreadystatechange = function() {//服务器返回值的处理函数，此处使用匿名函数进行实现
            console.log("readyState: " + xhr.readyState + "status: " +xhr.status);
            if (xhr.readyState == 4 && xhr.status == 200) {//
                var responseText = xhr.responseText;
                $("#msg").html("JSON: "+ responseText);
                var obj = JSON.parse(responseText);
                if(obj.appType ==1){//iOS
                    $("#appName").html( obj.appName);
                    $("#version").html(obj.version + " (build: "+obj.buildNumber +")");
                    $("#bundleID").html(obj.bundleIdentifier);
                    $("#team").html(obj.teamName);
                    $("#iOSDownload").html(obj.plistPath);
                    $("#iOSDownload").attr("href",obj.plistPath);

                }else if(obj.appType == 2){//android
                    $("#androidAppName").html( obj.appName);
                    $("#androidVersion").html(obj.version + " (build: "+obj.buildNumber +")");
                    $("#androidBundleID").html(obj.bundleIdentifier);
                    $("#androidTeam").html(obj.teamName);

                    $("#androidDownload").html(obj.fileUrl);
                    $("#androidDownload").attr("href",obj.iconUrl);
                    fileUrl = obj.fileUrl;
                    $("#androidIcon").attr('src',obj.iconUrl);
                }
            }
        };


        xhr.send(formFile);

        // return;
        // var data = formFile;
        //
        // $.ajax({
        //     url:"/fileupload",
        //     data:data,
        //     type:"post",
        //     cache:false,
        //     dataType: "json",
        //     processData:false, //必须写
        //     contentType:false, //必须写
        //     success:function(data){
        //         alert("上传完成!");
        //     }
        // })
    }


    /**
     * 选择文件之后触发事件,可以获取一些文件信息
     */
    function fileSelected() {
        fileList = document.getElementById('fileToUpload');
        var length = fileList.files.length;
        var frame = document.getElementById('fileFrame');
        //先移除子元素
        var childs = frame.childNodes;
        for(var i = 0; i < childs.length; i++) {
            frame.removeChild(childs[i]);
        }
        for(var i=0; i<length; i++){
            var file = fileList.files[i];
            if(file){
                var fileSize = file.size;
                if (file.size > 1024 * 1024){
                //    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                } else {
                   // fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                }
                var appName = document.getElementById("fileName");
                appName.innerHTML = file.name;
                $("#fileSize").html(fileSize);
            }
        }
    }


    function testData() {
        var data ="{\"appName\":\"松果财富顾问版\", \"version\":\"1.8.09\", \"buildNumber\":\"16\",\"bundleIdentifier\":\"com.cedarhd.financialplanner\",\"appType\":\"1\"}"; //json字符串

        var obj = JSON.parse(data);

        if(obj.appType == 1){
            alert(obj.appType);
        }






        $("#appName").html( obj.appName);
      /*  $.ajax({
            type: "get",
            url: "fileupload",
            data: null,
            dataType: "json",
            success: function (data) {
                console.log(data);
            }
        });*/
    }


</script>

<script>

</script>

</body>
</html>